<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>18001010803 王凯</title>
    <link rel="stylesheet" href="./download55zf/font_2249885_v6trtuzazmi/iconfont.css">
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        .a{
            background-color: red;
            padding: 10px;
            position: relative;
        }
        .a a{
            text-decoration: none;
            color: #fff;
        }
        .a h2{
            position: absolute;
            top: 3px;
            left: 20px;
            font-size: 2rem;
            margin: 0;
        }
        .a h3{
            margin: 0;
            color: silver;
            border-radius: 50px;
            background-color: #fff;
            font-size: 1rem;
            padding-left: 15px;
            padding-top: 5px;
            padding-bottom: 5px;
            width: 70%;
            margin-left: 50px;
        }
        .a .iconfont{
            font-size: 1rem
        }
        .b{
            background-color:rgb(246, 241, 241);
            padding-bottom: 10px;
        }
        .bb{
            background-color: #fff;
            color: rgb(200, 197, 197);
        }
        .bb p{
            margin: 0;
            padding-left: 20px;
            font-size: 1rem;
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .bb span{
            color: #000;
        }
        .c .iconfont{
            color: red;
            font-size: 1.5rem;
        }
        .c .gps{
            font-size: 1rem;
            color: rgb(200, 197, 197);
        }
        .c h2{
            padding-left: 20px;
        }
        .c .zj{
            padding-left: 20px;
            font-size: 1rem;
            color: rgb(200, 197, 197);
        }
        .c .dl{
            padding-top: 10px;
            padding-bottom: 10px;
            text-align: center;
            margin-left: 20px;
            color: #000;
            border: 1px solid rgb(200, 197, 197);
            width: 20%;

        }
        .c .rm{
            font-size: 1rem;
            color: rgb(200, 197, 197);
            padding-left: 20px;
        }
        .d ul{
            display: flex;
            list-style: none;
            flex-wrap: wrap;
            padding: 0;
            margin-bottom: 0;
        }
        .d li{
            text-align: center;
            border: 1px solid rgb(200, 197, 197);
            width: 20%;
            padding-top: 10px;
            padding-bottom: 10px;
            margin-left: 20px;
            margin-bottom: 20px;
        }
        .hx{
            background-color:rgb(246, 241, 241);
            padding-bottom: 10px;
        }
        .e ul{
            list-style: none;
            padding-left: 20px;
        }
        .e li{
            padding-top: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgb(246, 241, 241);
        }
        .f ul{
            list-style: none;
            margin-bottom: 5px;
        }
        .f{
            position: fixed;
            bottom: 0;
            right: 10px;
            color: rgb(200, 197, 197);
        }
    </style>
</head>
<body>
    <!-- a -->
    <div class="a">
        <h2><a href="index.html">×</a></h2>
        <h3><span class="iconfont icon-search"></span>&nbsp输入城市名或拼音</h3>
    </div>
    <!-- b -->
    <div class="b">
        <div class="bb">
            <p>当前城市：<span>大连</span></p>
        </div>
    </div>
    <!-- c -->
    <div class="c">
        <h2><span class="iconfont icon-zhanlan"></span> 大连 <span class="gps">GPS定位</span></h2>
        <p class="zj">最近访问城市</p>
        <p class="dl">大连</p>
        <p class="rm">热门城市</p>
    </div>
    <!-- d -->
    <div class="d">
        <ul>
            <li>北京</li>
            <li>成都</li>
            <li>重庆</li>
            <li>广州</li>
            <li>杭州</li>
            <li>南京</li>
            <li>上海</li>
            <li>深圳</li>
            <li>天津</li>
            <li>武汉</li>
            <li>西安</li>
        </ul>
        <div class="hx"></div>
    </div>
    <!-- e -->
    <div class="e">
        <ul>
            <li style="color: rgb(200, 197, 197);">A</li>
            <li>阿坝</li>
            <li>阿城区</li>
            <li>阿克苏</li>
            <li>阿拉善盟</li>
            <li style="color: rgb(200, 197, 197);">B</li>
            <li>白城</li>
            <li>包头</li>
            <li>宝应县</li>
            <li>泊头市</li>
            <li style="color: rgb(200, 197, 197);">C</li>
            <li>潮州</li>
            <li>沧州</li>
            <li>长春</li>
            <li>常德</li>
            <li style="color: rgb(200, 197, 197);">D</li>
            <li>大连</li>
            <li>大理</li>
            <li>丹东</li>
            <li>大同</li>
        </ul>
    </div>
    <!-- f -->
    <div class="f">
        <ul>
            <li>当前</li>
            <li>定位</li>
            <li>最近</li>
            <li>热门</li>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
            <li>E</li>
            <li>F</li>
            <li>G</li>
            <li>H</li>
            <li>J</li>
            <li>K</li>
            <li>L</li>
            <li>M</li>
            <li>N</li>
            <li>P</li>
            <li>Q</li>
            <li>R</li>
            <li>S</li>
            <li>T</li>
            <li>W</li>
            <li>X</li>
            <li>Y</li>
            <li>Z</li>
        </ul>
    </div>
</body>
</html>